<template>
  <div class="card">
    <div class="left">
       <div class="title">
        <router-link :to="'/article/'+item.id">
            {{item.title}}
        </router-link>
       </div>
       <div class="span" v-if="item.top ==100">
            <i class="iconfont icon-zhiding"></i>置顶
        </div>
       <div class="introduction">
        {{item.about}}
       </div>
       <div class="time">
        <i class="el-icon-date"></i> {{timeago.format(item.createTime,'zh_CN')}}
       </div>
    </div>
    <div class="right">
        <img :src="item.cover" alt="">
    </div>
  </div>
</template>

<script>
import * as timeago from "timeago.js";
export default {
props:['item'],data(){
    return {
        timeago
    }
}
}
</script>

<style lang="scss" scoped>
.card{
    background-color: var(--white);
    padding: 10px;
    display: flex;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    .left{
        flex: 1;
        padding: 35px 50px;
        .title{
            padding:  10px 0;
        }
        .introduction{
            font-size: 14px;
            line-height: 20px;
            margin: 10px 0 ;
        }
        .title{
            padding: 10px 0;
            a{
                display: block;
                font-size: 24px !important;
                color: #333;
            }
        }
        .span{
            color: #f9ac06;
            i{
                font-size: 16px;
            }
        }
    }
    .right{
        width: 40%;
       display: flex;
       align-items: center;
        overflow: hidden;
        img{
            width: 100%;
            height: 260px;
            object-fit: cover;
            object-position: center center;
            transition: transform 1s;
            &:hover{
                transform: scale(1.25);
            }
        }
    }
}
</style>